<script lang="ts" setup>
import { markRaw } from 'vue'
import CAdminTable from '../CAdminTable.vue'
import { TableInfo } from '../tableInfo'
import { dbCompanies, Company } from './helpers/dbCompanies'
import DbFormContractor from './helpers/DbFormContractor.vue'

const schema = [
  { id: 'name', label: '企業名' },
  {
    label: '郵便番号\n都道府県',
    parseValue: (val, ctx) => {
      const formData: Company = ctx.formData
      return `${formData.addressNum}\n${formData.addressPref}`
    },
  },
  { id: 'tel', label: '企業電話番号' },
  { id: 'personInCharge', label: '担当者名' },
  { id: 'licenseCount', label: '利用可能ライセンス数' },
  {
    id: 'statusContract',
    label: '契約状況',
    parseValue: (status) => {
      return status ? '契約済み ✅' : '-'
    },
  },
  {
    id: 'dateCreated',
    label: '作成日',
    parseValue: (date: Date) => {
      return date.toLocaleDateString()
    },
  },
]

const tableInfo: TableInfo<Company> = {
  schemaColumns: schema,
  db: dbCompanies,
  componentForm: markRaw(DbFormContractor),
}
</script>

<template>
  <CAdminTable :tableInfo="tableInfo" p_Title="タイトル漢字english" />
</template>
